<template>
	<view class="share">
		<view class="download">
			<view class="download_left">
				<image src="/static/im-video/1.svg" mode=""></image>
				<span>Loyo</span>
			</view>
			<view class="download_right disp" @click="open">
				Download
			</view>
		</view>
		<view class="video_views" v-show="dataList.momentType == 2">
			<view class="content_video">
				<video 
					:src="dataList.videoList[0]" 
					:poster="dataList.cover" 
					:muted="videoData.isMuted" 
					autoplay
					loop 
					ref="videoEl"
					id="videoEl"
					class="loogVideo"
					preload="true" 
					:controls="false"
					x5-video-player-type="h5-page"
					:x5-video-player-fullscreen="false" 
					:webkit-playsinline="true" 
					:x5-playsinline="true"
					:playsinline="true" 
					:fullscreen="false" 
					:show-center-play-btn='true' 
					@play="onPlay" 
					@pause="onPause"
					@ended="onEnded" 
					@timeupdate="onTimeUpdate" 
					@touchstart="touchstartPlay"
					@touchend="touchendPlay">
				</video>
			</view>
			<view class="video_comment">
				<!-- <view class="custom-controls" @touchstart="shadowTouchstart" @touchmove="shadowTouchmove" @touchend="shadowTouchend"  ref="progressLight"> -->
				<view class="custom-controls" ref="progressLight">
					<view class="progress" :style="{'width': LoogWidth +'px'}"></view>
					<view class="progress_circular" :style="{'left': LoogWidth-10 +'px'}" v-show="touchstartShow"></view>
				</view>
				<view class="comment">
					<view class="sned" @click="open">
						<image src="/static/im-video/input.png" mode=""></image>
						<view class="send_describe">发送一条友好评论</view>
					</view>
					<view class="views">查看 {{$cnt.numCount(dataList.clickCount)}}</view>
				</view>
			</view>
			<view class="content_">
				<view class="name" v-if="dataList.nickName">
					{{dataList.nickName}}
				</view>
				<view class="content" v-if="dataList.actualContent">
					{{dataList.actualContent}} 
				</view>
				<view class="location" v-if="dataList.place">
					<image src="/static/im-video/location.png" mode=""></image>
					<span>{{dataList.place}}</span>
				</view>
			</view>
			<view class="right_image">
				<view class="avtor disp" @click="open">
					<image :src="dataList.avatar?dataList.avatar:'/static/im-video/contacts.png'" mode=""></image>
					<view class="icon disp">+</view>
				</view>
				<!-- <view class="img" @click="likeFun"> -->
				<view class="img" @click="open">
					<image src="/static/im-video/dim.png" mode="" v-show="likeShow"></image>
					<image src="/static/im-video/light.png" mode="" v-show="!likeShow"></image>
					<view class="num">{{$cnt.numCount(dataList.likeCount)}}</view>
				</view>
				<view class="img" @click="open">
					<image src="/static/im-video/comment.png" mode=""></image>
					<view class="num">{{$cnt.numCount(dataList.commentCount)}}</view>
				</view>
				<view class="img" @click="open">
					<image src="/static/im-video/share.png" mode=""></image>
					<view class="num">0</view>
				</view>
				<view class="img" style="margin-top: 22rpx;" @click="mutedFun">
					<image src="/static/im-video/muted.png" mode="" v-show="!videoData.isMuted"></image>
					<image src="/static/im-video/nomuted.png" mode="" v-show="videoData.isMuted"></image>
				</view>
			</view>
		</view>
		<view class="pic_views" v-show="dataList.momentType == 1 && !clickSwiper">
			<view class="header_avtor" @click="open">
				<image :src="dataList.userAvatar" mode=""></image>
				<view class="information">
					<view class="name">{{dataList.nickName}}</view>
					<view class="time">{{$cnt.formatTime(dataList.createTime)}}</view>
				</view>
			</view>
			<view class="picture">
				<!-- <view class="pic_box" v-if="isSwiper">
					<view class="pic_resource">
						<image src="/static/waterfallFlow/10.webp" mode="" class="picture_one"></image>
					</view>
				</view> -->
				
				<view class="uni-margin-wrap">
					<swiper class="swiper" circular :autoplay="false" indicator-color="#D8D8D8" indicator-active-color="#FC65CB"
						:duration="500" @change="changeHandle" :indicator-dots="dataList.imageList.length>1" :current="swiperObj.current">
						<swiper-item v-for="(item, index) in dataList.imageList" :key="index" class="swiper_item" @click="bigPicFun">
							<view class="bk_img" :style="{'background-image': 'url('+item+')'}"></view>
							<!-- <view class="bk_img">
								<image :src="item" mode="" class="swiper_img"></image>
							</view> -->
							
						</swiper-item>
					</swiper>
					<view class="swiper_num" v-if="dataList.imageList.length>1">{{swiperObj.current+1}}/{{dataList.imageList.length}}</view>
				</view>
			</view>
			<view class="content">
				<view class="content_name" v-if="dataList.title">
					{{dataList.title}}
				</view>
				<view class="detail" v-if="dataList.actualContent">
					{{dataList.actualContent}}
				</view>
				<view class="location" v-if="dataList.place">
					<image src="/static/im-video/locationLight.png" mode=""></image>
					<span class="location_name">{{dataList.place}}</span>
				</view>
				<view class="other">
					<view class="left_other" v-if="false">
						View translations
					</view>
					<view class="left">
						<!-- 翻译 -->
					</view>
					<view class="right">
						查看 {{$cnt.numCount(dataList.clickCount)}}
					</view>
				</view>
			</view>
			<view class="border"></view> 
			<view class="comment_">
				<view class="commentNum">评论({{$cnt.numCount(dataList.commentCount)}})</view>
				
				<view class="list-container" v-for="(item, index) in dataList.momentCommentList" :key="index">
					<view class="parent-comment">
						<view class="comment-item">
							<view class="comment-inner-container">
								<view class="avatar" @click="open">
									<a href="">
										<image :src="item.avatar?item.avatar:'/static/im-video/contacts.png'" mode=""></image>
									</a>
								</view>
								<view class="content_info">
									<view class="author-wrapper" @click="open">
										<view class="author">
											<a href="">{{item.nikeName}}</a>
										</view>
									</view>
									<view class="comment_content">
										{{item.content}}
									</view>
									<view class="date">
										<span class="date_time">{{$cnt.formatTime(item.createTime)}}</span>
										<span class="location" @click="open">回复</span>
									</view>
								</view>
								<view class="interactions" @click="open">
									<image src="/static/im-video/like.png" mode="" v-if="false" class="like"></image>
									<image src="/static/im-video/nolike.png" mode="" class="like"></image>
									<view class="num">{{$cnt.numCount(item.likeCount)}}</view>
								</view>
							</view>
						</view>
						<view class="reply-container" v-if="item.fireChirldComment">
							<!-- <view class="list-container" v-for="(list, ids) in item.fireChirldComment" :key="ids"> -->
							<view class="list-container">
								<view class="comment-item comment-item-sub">
									<view class="comment-inner-container">
										<view class="avatar" @click="open">
											<a href="">
												<image :src="item.fireChirldComment.avatar?item.fireChirldComment.avatar:'/static/im-video/contacts.png'" mode=""></image>
											</a>
										</view>
										<view class="content_info">
											<view class="author-wrapper" @click="open">
												<view class="author">
													<a href="" class="name">{{item.fireChirldComment.nikeName}}</a>
												</view>
											</view>
											<view class="comment_content">
												{{item.fireChirldComment.content}}
											</view>
											<view class="date">
												<span class="date_time">{{$cnt.formatTime(item.fireChirldComment.createTime)}}</span>
												<span class="location" @click="open">回复</span>
											</view>
										</view>
										<view class="interactions" @click="open">
											<image src="/static/im-video/like.png" mode="" v-if="false" class="like"></image>
											<image src="/static/im-video/nolike.png" mode="" class="like"></image>
											<view class="num">{{$cnt.numCount(item.fireChirldComment.likeCount)}}</view>
										</view>
									</view>
								</view>
							</view>
							<!-- <view class="show-more">更多</view> -->
						</view>
					</view>
					<view class="border_item"></view>
				</view>
				<view class="first_comment disp" v-if="dataList.commentCount==0">
					<view class="con_first">
						<image src="/static/im-video/first_comment.png" mode=""></image>
						<view class="first">成为第一个发表评论的人!</view>
					</view>
					
				</view>
			</view>
			
			<view class="commentInput" >
				<view class="input_content">
					<view class="input_icon compment_icon" @click="open">
						<!-- <input type="text" placeholder="输入评论" class="input"/> -->
						<input type="text" placeholder="输入评论" class="input" disabled/>
						<image src="/static/im-video/smilingFace.png" mode=""></image>
					</view>
					<view class="love_share_icon compment_icon">
						<image src="/static/im-video/nolike.png" mode="" @click="open"></image>
						<span>{{$cnt.numCount(dataList.likeCount)}}</span>
					</view>
					<view class="love_share_icon compment_icon">
						<image src="/static/im-video/share1.png" mode="" @click="open"></image>
						<span>0</span>
					</view>
				</view>
				
			</view>
			
		</view>
	
		
		<view class="big_swiper" v-show="clickSwiper" @click="clickSwiper=false">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :autoplay="false" indicator-color="#D8D8D8" indicator-active-color="#FC65CB"
					:duration="500" @change="changeHandle" :indicator-dots="false" :current="swiperObj.current">
					<swiper-item v-for="(item, index) in dataList.imageList" :key="index" class="swiper_item">
						<view class="bk_img" :style="{'background-image': 'url('+item+')'}"></view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
import { getMomentDetail } from '@/utils/api.ts'
export default {
		data() {
			return {
				videoEl: null,
				timer: null,
				isDoubleTap: false,
				dataList: {}, // 返回数据
				videoData: {
					src: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
					// src: "https://us-stock5.xpccdn.com/b3a36b2d-2c42-4ded-9726-8fbf248a6cec.mp4",
					isMuted: true,
					// poster: '//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',
					isPlay: true,
					isPlaying: false,
					duration: 0,
					currentTime: 0
				},
				LoogWidth: 0,
				touchstartShow: false,
				likeShow: true,
				isSwiper: false,
				swiperObj: {
					current: 0,
				},
				clickSwiper: false,
				
			}
		},
		 onLoad(params) {
			console.log(this.$cnt)
			this.init(params)
		},
		mounted() {
			this.videoEl = uni.createVideoContext('videoEl', this);//创建视频实例指向video
			
			document.addEventListener('visibilitychange webkitvisibilitychange', function () {
				// 如果页面隐藏，推测打开scheme成功，清除下载任务
				if (document.hidden || document.webkitHidden) {
				   clearTimeout(this.timer);
				}
			});
			window.addEventListener('pagehide', function() {
				clearTimeout(this.timer);
			});
			// this.$cnt.errmsg("请在浏览器里面打开")
			// console.log(this.$cnt.isWxBrowser)
		},
		methods: {
			async init(params) {
				let { code, data } = await this.$http(getMomentDetail, {momentId: params.momentId}, 'POST')
				if (code == 200) {
					this.dataList = data
					// const blob = new Blob([data.imageList[0]], { type: 'image/jpeg' });
					// // console.log(blob);
					// let src = URL.createObjectURL(blob);
					
					
					// this.dataList.imageList[0] = src
					// console.log(this.dataList);
				}
			},
			mutedFun() {
				this.videoData.isMuted = !this.videoData.isMuted
			},
			likeFun() {
				this.likeShow = !this.likeShow
			},
			onPlay() {
			  this.videoData.isPlaying = true;
			},
			onPause() {
			  this.videoData.isPlaying = false;
			},
			onEnded() {
			  this.videoData.isPlaying = false;
			},
			onTimeUpdate(e) {
			  this.videoData.currentTime = e.detail.currentTime; // 当前时间点
			  this.videoData.duration = e.detail.duration; // 总时间
			  
			  let V = this.$refs.progressLight.$el.offsetWidth / this.videoData.duration;
			  this.LoogWidth = this.videoData.currentTime * V
			},
			playclick() { // 视频点击事件
				
			},
			touchstartPlay (){
				if (this.isDoubleTap) {
				    // 如果已经是一个双击，则清除状态
				    this.isDoubleTap = false;
				} else {
				    // 设置一个单击的定时器
				    setTimeout(() => {
				      this.isDoubleTap = false;
				    }, 250); // 250毫秒内没有第二次点击被认定为单击
				}
			},
			touchendPlay() {
				 if (!this.isDoubleTap) {
				    // 如果不是双击，设置为真，并处理单击事件
				    this.isDoubleTap = true;
				    // 在这里处理单击事件
				    console.log('Single Tap');
					 if (!this.videoData.isPlaying) {
						this.videoEl.play();
					 } else {
						this.videoEl.pause();
					 }
				} else {
				    // 处理双击事件
				    console.log('Double Tap');
				}
			 
			},
			shadowTouchstart(e){
				// console.log(e)
				// this.touchstartShow = true
			},
			shadowTouchmove(e){
				
			},
			shadowTouchend(e){
				// this.touchstartShow = false
			},
			changeHandle(e) {
				this.swiperObj.current = e.detail.current
			},
			bigPicFun(current) {
				this.clickSwiper = true
			},
			open() {
				// if(this.$cnt.isWxBrowser){
				// 	this.$cnt.errmsg("请在浏览器中打开")
				// 	return
				// }
				this.timer = setTimeout(() => {
				  // loyo 官网
					window.location.href = 'https://loyo.com/'
				}, 3000)
				
				// 跳转至loyo动态详情页面
				window.location.href = 'https://loyo.onelink.me/Y3oa/ve3x12kp'
				
			 //    let scheme = ''; // URL scheme
				// let iframe = document.createElement("iframe");
				// iframe.src = scheme;
				// iframe.style.display = "none"
				// iframe.setAttribute('src', scheme)
				// iframe.setAttribute('style', 'display: none;')
				
				// setTimeout(() => {
				// 	document.body.removeChild(iframe);
				// 	console.log("--------")
				// }, 2000)
				
			}
		}
	}
</script>

<style lang="scss">
	// ::v-deep .loogVideo .uni-video-current-time{
	// 	display: none;
	// }
	// ::v-deep .loogVideo .uni-video-duration {
	// 	display: none;
	// }
	// ::v-deep .loogVideo .uni-video-bar{
	// 	display: block !important;
	// 	padding: 0;
	// 	align-items: flex-start;
	// 	height: 150rpx;
	// }
	// ::v-deep .loogVideo .uni-video-bar .uni-video-controls{
	// 	margin: 0;
	// }
	// ::v-deep .loogVideo .uni-video-bar .uni-video-controls .uni-video-progress{
	// 	margin: 42rpx 20rpx;
	// }
	::v-deep .uni-margin-wrap .swiper .uni-swiper-wrapper{
		overflow: visible;
	}
	::v-deep .uni-margin-wrap .swiper .uni-swiper-dots-horizontal{
		position: fixed;
		bottom: -32rpx;
		z-index: 2;
	}
	.share {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		.download {
			margin-bottom: 10rpx;
			padding: 20rpx 30rpx;
			// width: calc(100vw - 60rpx);
			// height: 90rpx;
			width: 100;
			height: 100rpx;
			background: #e5e5e5;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.download_left{
				display: flex;
				flex-direction: row;
				align-items: center;
				
				image{
					width: 70rpx;
					height: 70rpx;
					margin-right: 10rpx;
				}
				span{
					color: #000000;
					font-weight: 600;
					font-size: 28rpx;
				}
			}
			.download_right{
				padding: 10rpx;
				border-radius: 20rpx;
				font-size: 30rpx;
				color: #ffffff;
				background: #e9bf09;
			}
		}
		.video_views{
			display: flex;
			flex-direction: column;
			width: 100vw;
			flex-grow: 1;
			
			.content_video {
				flex: 1;
				width: 100%;
				height: 100%;
				position: relative;
			
				.loogVideo {
					width: 100%;
					height: 100%;
				}
			
				.custom-controls {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgba(0, 0, 0, 0.5);
					padding: 10px;
				}
			}
			
			.video_comment{
				height: 124rpx;
				background: #000000;
				.custom-controls{
					width: 100vw;
					height: 4rpx;
					background: #4C4C4C;
					position: relative;
					.progress{
						position: absolute;
						top: 0;
						left: 0;
						height: 4rpx;
						width: 0;
						background: #FFFFFF;
						border-radius: 4rpx;
					}
					.progress_circular{
						position: absolute;
						top: -10rpx;
						left: 0;
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background: #ffffff;
					}
				}
				.comment{
					padding: 26rpx 22rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.sned{
						display: flex;
						flex-direction: row;
						image{
							width: 36rpx;
							height: 36rpx;
							margin-right: 14rpx;
						}
						.send_describe{
							font-size: 28rpx;
							color: #666666;
						}
					}
					.views{
						font-size: 28rpx;
						color: #666666;
					}
				}
			}
			
			.content_{
				position: absolute;
				bottom: 158rpx;
				background: rgba(0, 0, 0, 0);
				width: 550rpx;
				color: #ffffff;
				font-size: 28rpx;
				text-shadow: 0px 2rpx 4rpx rgba(0,0,0,0.2);
				font-family: RedHatDisplay, RedHatDisplay;
				line-height: 36rpx;
				margin-bottom: 34rpx;
				.name{
					margin-left: 24rpx;
					margin-top: 16rpx;
					font-weight: 600;
				}
				.content{
					margin-left: 24rpx;
					margin-top: 16rpx;
					width: 100%;
					word-break: break-all;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					
				}
				.location{
					margin-left: 14rpx;
					margin-top: 16rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					image{
						width: 48rpx;
						height: 48rpx;
					}
					span{
						
					}
				}
			}
			
			.right_image{
				position: absolute;
				right: 14rpx;
				bottom: 276rpx;
				.avtor{
					position: relative;
					image{
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
					}
					.icon{
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						position: absolute;
						bottom: -18rpx;
						left: 28rpx;
						color: #ffffff;
						font-weight: 600;
						font-size: 30rpx;
						background: #FC65CB;
					}
				}
				.img{
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 14rpx;
					image{
						width: 92rpx;
						height: 92rpx;
					}
					.num{
						font-family: RedHatDisplay, RedHatDisplay;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 32rpx;
						text-shadow: 0px 2rpx 4rpx rgba(0,0,0,0.2);
					}
				}
			}
		}
		
		.pic_views{
			font-family: RedHatDisplay, RedHatDisplay;
			display: flex;
			flex-direction: column;
			.header_avtor{
				margin-left: 32rpx;
				margin-top: 14rpx;
				display: flex;
				flex-direction: row;
				image{
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
				.information{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.name{
						font-weight: bold;
						font-size: 24rpx;
						color: #222222;
					}
					.time{
						font-size: 20rpx;
						color: #7B7B7D;
					}
				}
			}
			
			.picture{
				width: 100%;
				height: auto;
				margin-top: 14rpx;
				.pic_box{
					width: 100%;
					// overflow: hidden;
					position: relative;
					padding-bottom: 100%;
					.pic_resource{
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						right: 0;
						.picture_one{
							width: 100%;
							height: 100%;
						}
					}
				}
				
				.picture_img{
					
				}
				
				.uni-margin-wrap{
					width: 100%;
					height: 100vw;
					position: relative;
					.swiper{
						width: 100%;
						height: 100%;
						margin-left: auto;
						margin-right: auto;
						position: relative;
						// overflow: hidden;
						list-style: none;
						padding: 0;
						z-index: 1;
						.swiper_item{
							position: relative;
							width: 100%;
							height: 100%;
							z-index: 1;
							display: flex;
							box-sizing: content-box;
							.bk_img{
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: center;
								background-repeat: no-repeat;
								background-position: 50%;
								background-size: contain;
								.swiper_img{
									width: 100%;
									height: 100%;
								}
								
							}
							.swiper_video{
								width: 100%;
								height: 100%;
							}
						}
					}
					
					.swiper_num{
						padding: 8rpx 14rpx;
						z-index: 2;
						position: absolute;
						top: 20rpx;
						right: 20rpx;
						border-radius: 22rpx;
						background: #383734;
						font-size: 22rpx;
						color: #FFFFFF;
					}
				}
			}
			
			.content{
				margin-top: 32rpx;
				padding: 32rpx;
				// border-bottom: 2rpx solid #e7e7e7;
				.content_name{
					font-weight: bold;
					font-size: 36rpx;
					color: #222222;
					line-height: 46rpx;
					margin-bottom: 16rpx;
				}
				.detail{
					font-size: 32rpx;
					color: #222222;
					line-height: 42rpx;
					margin-bottom: 24rpx;
				}
				.location{
					margin-bottom: 24rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					border-radius: 22rpx;
					border: 2rpx solid #BBC4C9;
					padding: 8rpx 20rpx;
					display: inline-flex;
					image{
						width: 20rpx;
						height: 24rpx;
						margin-right: 8rpx;
						display: inline;
					}
					.location_name{
						font-size: 22rpx;
						color: #7B7B7D;
						line-height: 28rpx;
					}
				}
				.other{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					line-height: 36rpx;
					.left_other{
						color: #AEB1B3;
					}
					.left{
						color: #7B7B7D;
					}
					.right{
						color: #AEB1B3;
					}
				}
			}
			.border{
				margin-left: 32rpx;
				width: 686rpx;
				height: 2rpx;
				border: 2rpx solid #E7E7E7;
			}
			.comment_{
				padding: 30rpx 26rpx 102rpx 32rpx;
				font-family: RedHatDisplay, RedHatDisplay;
				.commentNum{
					font-size: 28rpx;
					color: #222222;
					line-height: 36rpx;
				}
				.list-container{
					margin-top: 24rpx;
					.parent-comment{
						margin-bottom: 30rpx;
						.comment-item{
							.comment-inner-container{
								position: relative;
								display: flex;
								flex-direction: row;
								z-index: 1;
								width: 100%;
								flex-shrink: 0;
								.avatar{
									flex: 0 0 auto;
									a{
										text-decoration: none;
										background-color: transparent;
										image{
											width: 64rpx;
											height: 64rpx;
											border-radius: 50%;
										}
									}
								}
								.content_info{
									margin-left: 20rpx;
									flex-grow: 1;
									display: flex;
									flex-direction: column;
									.author-wrapper{
										display: flex;
										justify-content: space-between;
										align-items: center;
										.author{
											display: flex;
											align-items: center;
											a{
												font-size: 28rpx;
												color: #AEB1B3;
												text-decoration: none;
												background-color: transparent;
											}
										}
									}
									.comment_content{
										margin-top: 12rpx;
										font-size: 26rpx;
										color: #222222;
										line-height: 34rpx;
									}
									.date{
										margin-top: 12rpx;
										display: flex;
										flex-direction: row;
										.date_time{
											margin-right: 12rpx;
											font-size: 22rpx;
											color: #AEB1B3;
											line-height: 28rpx;
										}
										.location{
											font-size: 22rpx;
											color: #7B7B7D;
											line-height: 28rpx;
										}
									}
								}
								.interactions{
									width: 94rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									flex-direction: column;
									.like{
										width: 32rpx;
										height: 32rpx;
										margin-bottom: 6rpx;
									}
									.num{
										font-size: 26rpx;
										color: #7B7B7D;
										line-height: 34rpx;
									}
								}
							}
						}
						.reply-container{
							margin-left: 84rpx;
							.list-container{
								.comment-item-sub{
									
								}
								.comment-item{
									position: relative;
									display: flex;
									.comment-inner-container{
										position: relative;
										display: flex;
										z-index: 1;
										width: 100%;
										flex-shrink: 0;
										.avatar{
											flex: 0 0 auto;
											a{
												text-decoration: none;
												background-color: transparent;
												image{
													width: 44rpx;
													height: 44rpx;
													border-radius: 50%;
												}
											}
										}
										.content_info{
											margin-left: 20rpx;
											flex-grow: 1;
											display: flex;
											flex-direction: column;
											.author-wrapper{
												display: flex;
												justify-content: space-between;
												align-items: center;
												.author{
													display: flex;
													align-items: center;
													a{
														font-size: 28rpx;
														color: #AEB1B3;
														text-decoration: none;
														background-color: transparent;
													}
												}
											}
											.comment_content{
												margin-top: 12rpx;
												font-size: 26rpx;
												color: #222222;
												line-height: 34rpx;
											}
											.date{
												margin-top: 12rpx;
												display: flex;
												flex-direction: row;
												.date_time{
													margin-right: 12rpx;
													font-size: 22rpx;
													color: #AEB1B3;
													line-height: 28rpx;
												}
												.location{
													font-size: 22rpx;
													color: #7B7B7D;
													line-height: 28rpx;
												}
											}
										}
										.interactions{
											width: 94rpx;
											display: flex;
											align-items: center;
											justify-content: center;
											flex-direction: column;
											.like{
												width: 32rpx;
												height: 32rpx;
												margin-bottom: 6rpx;
											}
											.num{
												font-size: 26rpx;
												color: #7B7B7D;
												line-height: 34rpx;
											}
										}
									}
								}
							}
							.show-more{
								margin-top: 16rpx;
								margin-left: 60rpx;
								font-size: 24rpx;
								color: #063C88;
								line-height: 32px;
							}
						}
					}
					
					.border_item{
						margin-left: 84rpx;
						width: 602rpx;
						height: 2rpx;
						border: 2rpx solid #E7E7E7;
					}
				}
				
				.first_comment{
					height: 604rpx;
					width: 100vw;
					.con_first{
						
						.first{
							font-size: 24rpx;
							color: #222222;
							line-height: 32rpx;
							margin-top: 16rpx;
							text-align: center;
						}
						image{
							width: 562rpx;
							height: 286rpx;
							
						}
					}
					
				}
			}
			.commentInput{
				width: 100vw;
				height: 134rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				border-top: 2rpx solid #e7e7e7;
				background: rgba(255, 255, 255, 1);
				z-index: 10;
				font-family: RedHatDisplay, RedHatDisplay;
				.input_content{
					height: 104rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.compment_icon{
						display: flex;
						flex-direction: row;
						align-items: center;
					}
					.input_icon{
						padding: 16rpx 22rpx 16rpx 32rpx;
						height: 72rpx;
						margin-right: 24rpx;
						margin-left: 32rpx;
						flex-grow: 1;
						background: #f5f5f5;
						// background: #DCDEE0;
						border-radius: 16rpx;
						// opacity: .24;
						.input{
							flex-grow: 1;
							font-size: 28rpx;
							color: #7B7B7D;
							line-height: 36rpx;
						}
						image{
							width: 40rpx;
							height: 40rpx;
						}
					}
					.love_share_icon{
						margin-right: 32rpx;
						image{
							width: 48rpx;
							height: 48rpx;
							margin-right: 12rpx;
						}
						span{
							font-weight: bold;
							font-size: 28rpx;
							color: #222222;
							line-height: 36rpx;
						}
					}
				}
				
			}
			
		}
	
		.big_swiper{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100vw;
			height: 100vh;
			z-index: 999;
			background: #FFFFFF;
			.uni-margin-wrap{
				width: 100%;
				height: 100%;
				position: relative;
				.swiper{
					width: 100%;
					height: 100%;
					margin-left: auto;
					margin-right: auto;
					position: relative;
					// overflow: hidden;
					list-style: none;
					padding: 0;
					z-index: 1;
					.swiper_item{
						position: relative;
						width: 100%;
						height: 100%;
						z-index: 1;
						display: flex;
						box-sizing: content-box;
						.bk_img{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							background-repeat: no-repeat;
							background-position: 50%;
							background-size: contain;
							
						}
						.swiper_video{
							width: 100%;
							height: 100%;
						}
					}
				}
				
				.swiper_num{
					padding: 8rpx 14rpx;
					z-index: 2;
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					border-radius: 22rpx;
					background: #383734;
					font-size: 22rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>